<template>
  <div>
    <div id="breadcrumb">
      <a-breadcrumb>
        <a-breadcrumb-item>赛季奖励</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <a-card :bordered="false">
      <a-col>
        <template>
          <div class="record">
            <a-button icon="plus" @click="showModal">新增</a-button>
          </div>
        </template>
      </a-col>
      <a-table
          size="middle"
          rowKey="id"
          :columns="columns"
          :data-source="rewardList"
          :pagination="false">
        <template slot="season" slot-scope="text, record">
          <div>
            S{{ record.season }}赛季
          </div>
        </template>
        <template slot="action" slot-scope="text, record">
          <div>
            <a href="javascript:;" @click="showModal(record)">
              编辑
            </a>
          </div>
        </template>
      </a-table>
      <a-modal
          v-model="visible"
          :title="id?'编辑奖励':'新增奖励'"
          on-ok="handleOk"
      >
        <template slot="footer">
          <a-button key="back" @click="handleCancel">
            取消
          </a-button>
          <a-button
              key="submit"
              type="primary"
              :loading="loading"
              @click="handleOk"
          >
            保存
          </a-button>
        </template>
        <div style="display: flex; align-items: center; height: 80px">
          <div>玩家姓名：</div>
          <div style="display: flex;flex: 1">
            <a-select
                v-model="player_id"
                allowClear
                placeholder="请选择玩家"
                :options="player"
                style="width: 100%"
            />
          </div>
        </div>
        <div style="display: flex; align-items: center; height: 80px">
          <div>身份次数：</div>
          <div style="display: flex;flex: 1">
            <a-input
                v-model="amount"
                placeholder="请输入身份次数"
            />
          </div>
        </div>
        <div style="display: flex; align-items: center; height: 80px">
          <div>所属赛季：</div>
          <div style="display: flex;flex: 1">
            <a-input
                v-model="season"
                placeholder="请输入所属赛季"
            />
          </div>
        </div>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
export default {

  name: "Reward",

  data() {
    return {
      columns: [
        {
          title: 'ID',
          dataIndex: 'id'
        },
        {
          title: '姓名',
          dataIndex: 'player.player'
        },
        {
          title: '奖励类型',
          dataIndex: 'type'
        },
        {
          title: '使用次数',
          dataIndex: 'amount',
        },
        {
          title: '所属赛季',
          dataIndex: 'season',
          scopedSlots: {customRender: 'season'},
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: {customRender: 'action'},
        }
      ],
      visible: false,
      loading: false,
      rewardList: [],
      player: [],
      id: null,
      player_id: '',
      amount: '',
      season: 0,
    }
  },

  created() {
    this.getReward()
  },
  mounted() {
    this.getPlayerList()
  },
  methods: {
    getReward() {
      this.$http.get('api/admin/reward').then((result) => {
        this.rewardList = result.data
      }, (error) => {
        this.$message.error(error.message)
      })
    },
    showModal(record) {
      this.id = record.id
      this.player_id = record.player_id
      this.amount = record.amount
      this.season = record.season
      this.visible = true
    },
    handleCancel(e) {
      this.visible = false
    },
    handleOk(e) {
      this.loading = true

      this.$http.post('api/admin/reward', {
        id: this.id,
        player_id: this.player_id,
        amount: this.amount,
        season: this.season
      }).then((result) => {
        this.$message.success(this.id ? '修改成功' : '新增成功')
        this.getReward()
      }, (error) => {
        this.$message.error(error.message)
      })
      this.visible = false
      this.loading = false
    },
    getPlayerList() {
      this.$http.get('api/admin/player/select').then((result) => {
        const data = []

        result.data.forEach((item) => {
          data.push({
            key: item.id,
            label: item.player,
          })
        })
        this.player = data
      }, (error) => {
        this.$message.error(error.message)
      })
    }
  }
}
</script>

<style scoped>
#breadcrumb {
  margin-top: 0;
  margin-bottom: 10px;
}

.record {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
</style>